import React, { Component, Fragment } from 'react';
import { Breadcrumb, Checkbox,Empty } from 'antd';
import axios from './../../../axios';
import FileList from './../../../components/FileListShare';
import { connect } from 'react-redux';
import './index.less';

class Whole extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			requestParams: {//请求列表数据的参数
				path_id: 0,
				people_id: 0
			},
			pid: 0,//当前所在目录层级
			res: false,
			filelist: [],//文件列表
			checkedArr: [],//选中项
			showCheckboxAll: false,//全选checkbox框
			view_mode: "list",//列表显示或矩阵显示
			breadcrumbList: null
		};
	}
	
	componentDidMount(){
		this.requestList(this.state.requestParams);
		const view_mode = localStorage.getItem("jqmkj_sharepeople_view_mode");
		if(view_mode){
			this.setState({view_mode});
		}
	}
	
	//切换列表显示或矩阵显示
	changeViewMode = (view_mode) => {
		this.setState({view_mode});
		localStorage.setItem("jqmkj_sharepeople_view_mode", view_mode);
	}
	
	//刷新列表
	refreshList = () => {
		setTimeout(()=>{
			this.requestList(this.state.requestParams);
		},1000)
	}
	
	requestList = (requestParams) => {
		let breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbshare"));
		if(breadcrumbArr){
			let breadcrumbList = breadcrumbArr.map(item => {
				return <Breadcrumb.Item
					key={item.path_id}
					onClick={()=>this.folderClick(item.path_id,item.filename,item.people_id)}
				>
					{item.filename}
				</Breadcrumb.Item>
			})
			this.setState({breadcrumbList});
		}else{
			breadcrumbArr = [{path_id: 0, people_id: 0, filename: "全部"}];
			let breadcrumbList = breadcrumbArr.map(item => {
				return <Breadcrumb.Item
					key={item.path_id}
					onClick={()=>this.folderClick(item.path_id,item.filename,item.people_id)}
				>
					{item.filename}
				</Breadcrumb.Item>
			})
			this.setState({breadcrumbList});
		}
		axios.ajax({
			headers: {'Content-Type':'application/json'},
			url: "/Share/People/shareFileRetrieve", 
			method: "post",
			data: requestParams,
		}).then(res=>{
			if(res.code === 0 && res.result.list){
				let resData = res.result.list.map((item, index)=>{
					let checked = false;
					return {...item, checked}
				})
				this.setState({
					filelist: resData,
					count: res.result.pagination.count,
					checkedArr: [],
					res: true
				})
			}
		}).catch(err=>{
		})
	}

	
	//点击进入文件夹
	folderClick = (path_id, filename, people_id) => {
		let breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbshare"));
		if(!breadcrumbArr){
			breadcrumbArr = [{path_id: 0, people_id: 0, filename: "全部"}];
		}
		let flag = false;
		for(let i = 0; i < breadcrumbArr.length; i++){
			if(breadcrumbArr[i].path_id === path_id){
				breadcrumbArr = breadcrumbArr.slice(0,i+1);
				flag = true;
			}
		}
		if(!flag){
			breadcrumbArr.push({path_id, people_id,filename});
		}
		sessionStorage.setItem("breadcrumbshare", JSON.stringify(breadcrumbArr));
		let requestParams = {
			path_id,
			people_id
		}
		this.requestList(requestParams);
		this.setState({requestParams})
	}
	
	//选中项
	checkedClick = (checkedArr) => {
		this.setState({
			checkedArr
		})
	}
	
	//点击全选checkbox框
	clickCheckboxAll = e => {
		this.props.checkboxAll(e.target.checked);
	}
	
	
	render(){
		const hasSelectedLength = this.state.checkedArr.length;
		const { showCheckboxAll, breadcrumbList } = this.state;
		let breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbshare"));
		let contextMenuType = "cacelAndDelete";
		if(breadcrumbArr && breadcrumbArr.length > 1){
			contextMenuType = "onlyDelete"
		}
		return (
			<div className="page-wrap">
				<div className="page-header">
					<div className="breadcrumb">
						<Breadcrumb>
							{ breadcrumbList }
						</Breadcrumb>
					</div>
					<div className="change-show">
						{/*<MenuOutlined 
							className={this.state.view_mode === "list" ? "active" : ""}
							onClick={()=>this.changeViewMode("list")} 
						/>
						<AppstoreOutlined
							className={this.state.view_mode === "thumb" ? "active" : ""}
							onClick={()=>this.changeViewMode("thumb")}
						/>*/}
					</div>
				</div>
				<div className="page-content">
					
					{ 
						hasSelectedLength > 0 ?
						<div className="selected-num">
							已选择{hasSelectedLength} 项
						</div> : ""
					}
					{
						this.state.filelist.length > 0 ? 
						<div
							className="line-header"
							onMouseEnter={()=>this.setState({showCheckboxAll:true})}
							onMouseLeave={()=>this.setState({showCheckboxAll:false})}
						>
							{   (hasSelectedLength > 0 || showCheckboxAll) ?
								<div className="checkboxall-wrap">
									<Checkbox onClick={(e)=>this.clickCheckboxAll(e)} />
								</div>:""
							}
							<div className="border-bottom">
								<span>文件名</span>
								{this.state.view_mode === "list" ? 
									<Fragment>
										<span className="w150 float-right">分享时间</span>
										<span className="w150 float-right">接收者</span>
										<span className="w150 float-right">大小</span>
									</Fragment>:""
								}
							</div>
						</div>:""
					}
					{
						this.state.filelist.length > 0 ? 
						<div className="file-wrap" style={{height: "calc(100% - 140px)"}}>
							<FileList
								filelist={this.state.filelist}
								folderClick={this.folderClick}
								refreshList={this.refreshList}
								checkedClick={this.checkedClick}
								contextMenuType={contextMenuType}
							/>
							<p style={{textAlign: "center", clear: "both"}}>共{this.state.count}项</p>
						</div>
						: this.state.res?
						<div className="empty-page">
							<div>
								<Empty description='暂无数据'/>
							</div>
						</div>:""
					}
				</div>
			</div>
		)
	}
}

const mapState = (state) => {
	return {
		item: state.item,
		searchValue: state.searchValue
	}
}

const mapDispatch = (dispatch) => {
	return {
		checkboxAll(isCheckedAll){
			dispatch({
				type: "CHECKBOX_ALL",
				isCheckedAll
			})
		}
	}
}

export default connect(mapState, mapDispatch)(Whole);